<template>
  <div>
    <!-- {{ currentItem }} -->

    <el-input
      v-if="
        currentItem.type === 'input' ||
          currentItem.type === 'textarea' ||
          currentItem.type === 'number'
      "
      :type="currentItem.type"
      :placeholder="currentItem.attributes.placeholder"
      :disabled="currentItem.attributes.disabled"
    >
      <template
        slot="prepend"
        v-if="currentItem.slot && currentItem.slot.prepend"
        >{{ currentItem.slot.prepend }}</template
      >
      <template
        slot="append"
        v-if="currentItem.slot && currentItem.slot.append"
        >{{ currentItem.slot.append }}</template
      >
    </el-input>
    <el-select
      :disabled="currentItem.attributes.disabled"
      style="width:100%"
      v-if="currentItem.type === 'select'"
      v-model="value"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>

    <el-checkbox-group
      v-if="currentItem.type === 'checkbox'"
      v-model="options"
      :disabled="currentItem.attributes.disabled"
    >
      <el-checkbox
        label="复选框 A"
        :border="currentItem.attributes.border"
        v-if="currentItem.attributes.optionType === 'default'"
      ></el-checkbox>
      <el-checkbox
        :border="currentItem.attributes.border"
        label="复选框 B"
        v-if="currentItem.attributes.optionType === 'default'"
      ></el-checkbox>
      <el-checkbox
        label="复选框 C"
        :border="currentItem.attributes.border"
        v-if="currentItem.attributes.optionType === 'default'"
      ></el-checkbox>

      <el-checkbox-button
        label="复选框 A"
        v-if="currentItem.attributes.optionType === 'button'"
      ></el-checkbox-button>
      <el-checkbox-button
        label="复选框 B"
        v-if="currentItem.attributes.optionType === 'button'"
      ></el-checkbox-button>
      <el-checkbox-button
        label="复选框 C"
        v-if="currentItem.attributes.optionType === 'button'"
      ></el-checkbox-button>
    </el-checkbox-group>

    <el-radio-group
      v-if="currentItem.type === 'radio'"
      :disabled="currentItem.attributes.disabled"
    >
      <el-radio
        :label="3"
        :border="currentItem.attributes.border"
        v-if="currentItem.attributes.optionType === 'default'"
        >备选项</el-radio
      >
      <el-radio
        :label="6"
        :border="currentItem.attributes.border"
        v-if="currentItem.attributes.optionType === 'default'"
        >备选项</el-radio
      >
      <el-radio
        :label="9"
        :border="currentItem.attributes.border"
        v-if="currentItem.attributes.optionType === 'default'"
        >备选项</el-radio
      >

      <el-radio-button
        :label="3"
        v-if="currentItem.attributes.optionType === 'button'"
        >备选项</el-radio-button
      >
      <el-radio-button
        :label="6"
        v-if="currentItem.attributes.optionType === 'button'"
        >备选项</el-radio-button
      >
      <el-radio-button
        :label="9"
        v-if="currentItem.attributes.optionType === 'button'"
        >备选项</el-radio-button
      >
    </el-radio-group>

    <el-slider
      :disabled="currentItem.attributes.disabled"
      v-if="currentItem.type === 'slider'"
      v-model="value1"
    ></el-slider>
    <el-switch
      :disabled="currentItem.attributes.disabled"
      v-if="currentItem.type === 'switch'"
      v-model="value"
      active-color="#13ce66"
      inactive-color="#ff4949"
    ></el-switch>
    <el-alert
      :disabled="currentItem.attributes.disabled"
      v-if="currentItem.type === 'alert'"
      title="成功提示的文案"
      type="success"
    >
    </el-alert>

    <el-date-picker
      :disabled="currentItem.attributes.disabled"
      v-if="currentItem.type === 'date'"
      v-model="value"
      :type="currentItem.attributes.type"
      :start-placeholder="currentItem.attributes['start-placeholder'] || ''"
      :end-placeholder="currentItem.attributes['end-placeholder'] || ''"
      :value-format="currentItem.attributes['value-format'] || ''"
      :range-separator="currentItem.attributes['range-separator'] || ''"
      :placeholder="currentItem.attributes.placeholder"
      :format="currentItem.attributes.format"
      :readonly="currentItem.attributes.readonly ? true : false"
      style="width:100%"
    >
    </el-date-picker>
    <el-time-picker
      :disabled="currentItem.attributes.disabled"
      style="width:100%"
      v-if="currentItem.type === 'time'"
      v-model="value"
      :placeholder="currentItem.attributes.placeholder"
      :start-placeholder="currentItem.attributes['start-placeholder'] || ''"
      :end-placeholder="currentItem.attributes['end-placeholder'] || ''"
      :range-separator="currentItem.attributes['range-separator'] || ''"
      :value-format="currentItem.attributes['value-format'] || ''"
      :is-range="currentItem.attributes['is-range'] ? true : false"
      :format="currentItem.attributes.format"
      :picker-options="JSON.stringify(currentItem.attributes['picker-options'])"
      :type="currentItem.attributes.type"
    >
    </el-time-picker>
    <el-rate
      :disabled="currentItem.attributes.disabled"
      v-if="currentItem.type === 'rate'"
    ></el-rate>

    <el-cascader
      :disabled="currentItem.attributes.disabled"
      v-if="currentItem.type === 'cascader'"
      v-model="value"
      :options="options"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  props: {
    currentItem: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      value: "",
      value1: 80,
      options: []
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped></style>
